<template>
	<view class="team-person" style="background-color: #fff;padding: 20rpx;height: 54vh;">
		<view class="flex-between" style="margin-bottom: 30rpx;">
			<view class="bold">选择赛事队伍</view>
			<!-- <view style="color: #4BA677;" @click="add" v-if="list.length">添加</view> -->
			<image @click="add" style="width: 40rpx;height: 40rpx;"
				src="https://oss.szsportscenter.cn/img/91e66c367cf85fedebbbf3834c7aa4a97129ad57.png" mode=""></image>
		</view>

		<!-- <u-checkbox-group v-model="checked" shape="circle" v-if="list.length" @change="checkboxChange">
			<view class="list" style="width: 100%;">
				<team-info-item
					v-for="item in list"
					:key="item.id"
					:data="item"
				>
					<template #right>
						<u-checkbox :name="item.id" @change="radioChecked( item)" :value="item.id"/>
					</template>
					
					<template #description>
						<view class="flex-between">
							<view style="color: #999;">{{ item.member.length }}名队员</view>
							<view>
								<view class="add-member flex-center" v-if="!item.member.length" @click="addMember">
									<u-icon name="plus" color="#999"></u-icon>
								</view>
								<view class="avatar-list d-flex">
									<view
										class="avatar"
										v-for="it in item.member.slice(0, 2)"
										:key="item.id"
									>
										<u-avatar
											:src="item.avatar"
											size="72rpx"
										/>
									</view>
								</view>
							</view>
						</view>
					</template>
				</team-info-item>
			</view>
		</u-checkbox-group> -->
		<scroll-view style="height: 47vh;" scroll-y="true">
			<u-radio-group v-model="checked" shape="circle" v-if="list.length" @change="checkboxChange">
				<view class="list" style="width: 100%;">
					<team-info-item v-for="item in list" :key="item.id" :data="item">
						<template #right>
							<u-radio :name="item.id" @change="radioChecked( item)" :value="item.id"
								activeColor="#4BA677" />
						</template>

						<template #description>
							<view class="flex-between" @click="addMember(item)">
								<!-- <view style="color: #999;">3名队员</view> -->
								<view style="color: #999;" v-if="item.memberData != ''">
									{{ item.memberData[0].length }}名队员
								</view>
								<view style="color: #999;" v-if="item.memberData == ''">0名队员</view>

								<view>
									<view class="add-member flex-center" v-if="!item.memberData[0].length">
										<u-icon name="plus" color="#999"></u-icon>
									</view>
									<view class="avatar-list d-flex">
										<!-- v-for="it in item.memberData[0].avatar.slice(0, 2)" -->
										<!-- <view
										
										v-for="it in item.memberData"
										:key="item.id"
									> -->
										<view class="avatar" v-for="ita in item.memberData[0].avatar" :key="item.id">
											<u-avatar :src="ita" size="72rpx" />
										</view>
										<!-- </view> -->
									</view>
								</view>
							</view>
						</template>
					</team-info-item>
				</view>
			</u-radio-group>

			<view v-else @click="add">
				<u-empty :icon="`${assetsPath}db48bf10cb8573d3c80085c76e4afadd71783fcd.png`" text="请添加队员或队伍>"
					textColor="#4BA677" marginTop="80rpx"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCurrentPath
	} from '@/utils/util.js';

	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			// value: {
			// 	type: Array,
			// 	default: () => []
			// }
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
			}
		},
		computed: {
			checked: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				}
			}
		},
		methods: {
			checkboxChange(n) {},
			radioChecked(item) {},
			add() {
				uni.navigateTo({
					// url: `/pages/personal/team-info/add/add?return=${getCurrentPath()}`
					// url: '/page_venues/pages/team-info/add/add?return=${getCurrentPath()}'
					// url: `/page_venues/pages/team-info/add/add?return=${getCurrentPath()}`
					url: '/page_venues/pages/team-info/add/add?type=' + 1
				});
			},
			addMember(item) {
				uni.navigateTo({
					url: '/pages_other/race/choose-member/add-member/add-member?race_id=' +
						item.race_id +
						"&length=" +
						item.memberData[0].length +
						"&member_ids=" +
						item.memberData[0].member_ids +
						"&team_id=" +
						item.id,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team-person {
		.add-member {
			width: 72rpx;
			height: 72rpx;
			border: 1rpx dashed #999;
			border-radius: 50%;
		}

		/deep/.avatar-list {
			transform-style: preserve-3d;

			.avatar:first-of-type {
				transform: translateX(50%) translateZ(-1px);
			}
		}
	}
</style>